<template>
  <div class="login" id="login">
    <div class="login-bann">
      <div class="login-bann-description">{{ this.description }}</div>
    </div>

    <div class="login-group">
      <div class="login-icon">
        <el-icon :size="260" color="#409EFC">
          <edit></edit>
        </el-icon>
      </div>
      <div class="login-input">
        <label>{{ title }}</label>
        <div><el-input v-model="username" placeholder="UserName" /></div>
        <div>
          <el-input v-model="password" type="password" placeholder="password" />
        </div>
        <div>
          <el-button class="login-btn-go" type="primary" @click="go"
            >GO</el-button
          >
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginPage",
  data: function () {
    return {
      title: "管理系统",
      username: "",
      password: "",
      description:
        "China opposes any act of inciting war and has taken a responsible attitude from the very beginning to persuade all parties not to escalate tensions and incite war, a foreign ministry spokesperson said on Thursday.",
    };
  },
  methods: {
    go: function () {
      var that = this;
      var data = {
        username: that.username,
        password: that.password,
        CreateUser: "",
        TenantUUID: "",
      };
      this.$http
        .post("http://localhost:5078/api/login/loginuser", data, {})
        .then(function (res) {
          if (res.data.code == 200 && res.data.data) {
            that.$emit("tabpage", "2");
          } else {
            alert(res.data.msg);
          }
        });
    },
  },
  components: {},
  props: {
    tabpage: Object,
  },
  created() {
    var that = this;
    //当前页面监视键盘输入
    document.onkeydown = function (e) {
      //事件对象兼容
      let e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
      //左
      console.log(e1.keyCode);
      if (e1 && e1.keyCode == 13) {
        that.go();
      }
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background-color: #409eff;
}
.login-icon {
  text-align: center;
  padding-top: 3em;
}

.login-input {
  text-align: center;
  width: 20vw;
  padding: 2em;
}

.login-input div {
  text-align: center;
  margin-top: 1em;
}
.login-bann {
  text-align: center;
  width: 100%;
  padding-top: 70vh;
}
.login-bann-description {
  color: #fff;
  padding: 3em;
}

.login-group {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100vh;
  background-color: #fff;
}

.login-btn-go {
  width: 100%;
}
</style>
 